<template>
	<div class="decorate-video">
    <div v-show="isPlayArr[videoSort]" :style="{padding:tplItemData.modulePadding+'px 0',height: videoHeight}">
        <video class='video' :id="'myVideo' + vid" :style="{height: videoHeight}" :controls="true" :src="videoUrl[videoSort]" custom-cache="false" :show-casting-button="showButton"
        ></video>
    </div>
    <div v-if="!isPlayArr[videoSort]" :style="{padding:tplItemData.modulePadding+'px 0',height: videoHeight +'px'}">
      <div class="play" ref="postImg"  @click="ToPlayVideo(tplItemData.videoSource == 1 ? tplItemData.website:tplItemData.videosrc, isPlayArr, videoSort)">
        <img :src="tplItemData.poster ? tplItemData.poster:tplItemData.videoPic" @load="onImageLoad($event)" alt="">
        <i></i>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
	import { GetIndexVideoDecoration } from "@/api/shop/index.js";
  import small from '@/smallapp/small'
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        videoHeight: '225px',
				videoUrl: [],
        isPlayVideo: false,
        isPlayArr: [],
        videoSort: 0,
        showButton: false, // 投屏按钮
      }
    },
    props: {
			tplItemData: {
				type: Object,
				default: {}
			},
			vid: {
				type: [String, Number],
				default: 0
			}
    },
    created() {
      // console.log(this.tplItemData, 'video')
    },
		watch: {
			tplItemData(val) {
				this.isPlayArr = val.isPlayArr;
				this.videoSort = val.videoSort;
			}
		},
		mounted() {
			this.isPlayArr = this.tplItemData.isPlayArr;
			this.videoSort = this.tplItemData.videoSort;
		},
    methods: {
			ToPlayVideo(websiteUrl, isPlayArr, videoSort) {
				// console.log('ToPlayVideo-tplItemData', this.tplItemData)			
				// console.log('ToPlayVideo-websiteUrl', this.tplItemData.videoSource, websiteUrl, isPlayArr, videoSort)			
        this.showButton = small.wxCache('isProjectionScreen') // 投屏按钮
				var idstr_reg = /vid\=([^\&]*)($|\&)+/g;
				if (websiteUrl.match(idstr_reg)) { // 当有vid的时候走正常播放替换逻辑
					GetIndexVideoDecoration({
						vUrl: websiteUrl
					}).then(res => {
						if (res.status == 1) {
							let videoUrlArr = [];
							videoUrlArr[videoSort] = res.data;

							isPlayArr[videoSort] = true;
							this.isPlayArr = isPlayArr;
							this.videoUrl = videoUrlArr;

							document.querySelector(`#myVideo${this.vid}`).$$getContext().then(context => {
								context.play();
							})
						} else {
							this.$Error(res.msg)
						}
					})
				} else {	
					let videoUrlArr = [];
					videoUrlArr[videoSort] = websiteUrl;
					this.videoUrl = videoUrlArr;
					isPlayArr[videoSort] = true;
					this.isPlayArr = isPlayArr;

					document.querySelector(`#myVideo${this.vid}`).$$getContext().then(context => {
						context.play();
					})

				}
			},
      // TODO 小程序video获取图片高度
      onImageLoad(event){
        const imgHeight = event.detail.height
        // console.log(imgHeight, event, 'hhheight')
        if(imgHeight > parseInt(this.videoHeight)){
          this.videoHeight = imgHeight + 'px'
        } else {
          this.videoHeight = '225px'
        }
      }
    }
  })
</script>

<style lang='scss'>
.decorate-video{
  .diy_upload_video{
    width:100%;
  }
  .play{
    width: 100%;
    height: 100%;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
    i{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(https://img.wifenxiao.com/h5-wfx/images/video_play.png) center no-repeat;
      background-size: 100px 100px;
      cursor: pointer;
    }
  }
}
.video {
	width: 100%;
}
</style>
